<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引用axios的CDN -->
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>基本使用</h2>
            <button class="btn btn-get">发送GET请求</button>
            <button class="btn btn-post">发送POST请求</button>
            <button class="btn btn-put">发送PUT请求</button>
            <button class="btn btn-delete">发送DELETE请求</button>
        </div>
        <script>
            // 获取按钮
            const btns = document.querySelectorAll(".btn");

            // 发送GET请求
            btns[0].addEventListener("click",function(){
                // 发送 AXIOS 请求
                axios({
                    // 请求类型
                    method: 'GET',
                    // 请求地址
                    url: 'http://localhost:8080/AXIOS/jsonServer',
                }).then(response => {
                    console.log(response);
                });
            });

            // 发送POST请求
            btns[1].addEventListener("click",function(){
                // 发送 AXIOS 请求
                axios({
                    // 请求类型
                    method: "post",
                    // 请求地址
                    url: "http://localhost:8080/AXIOS/jsonServer",
                    // 发送参数
                    data: {
                        id: 2
                    }
                }).then(response => {
                    // 响应信息
                    console.log(response);
                });
            });
        </script>
    </body>
</html>